//记录初始值
var nowIndex = 0; // 当前显示的图片索引
//计时器
var timer; // 用于存储计时器的引用
//获取所有含有img的a标签
var imgs = document.querySelectorAll(".banner .images a"); // 存储所有图片链接的数组
//获取所有小按钮的a标签
var points = document.querySelectorAll(".banner .point a"); // 存储所有小按钮的数组
//获取左右按钮
var btns = document.querySelectorAll(".banner .btn"); // 存储左右按钮的数组

bannerTick(); // 初始化调用轮播函数

function bannerTick() {
	timer = setInterval(function () { // 设置定时器，每隔2秒执行一次
		nowIndex += 1; // 索引加1
		//设置条件
		if (nowIndex >= imgs.length) { // 如果索引超出图片数组长度
			nowIndex = 0; // 重置索引为0
		}
		changeAll(); // 调用更改所有元素的函数
	}, 2000); // 每2000毫秒（2秒）执行一次
}

//点击小按钮
for (var i = 0; i < points.length; i++) { // 遍历所有小按钮
	var pointA = points[i]; // 获取当前小按钮
	pointA.index = i; // 为小按钮添加索引属性
	pointA.onmouseenter = function () { // 鼠标移入事件
		//停止计时器
		clearInterval(timer); // 清除计时器
	}
	pointA.onmouseout = function () { // 鼠标移出事件
		bannerTick(); // 重新启动计时器
	}
	pointA.onclick = function () { // 点击事件
		nowIndex = this.index; // 设置当前索引为点击的小按钮索引
		changeAll(); // 调用更改所有元素的函数
	}
}

//左右方向按钮
for (var i = 0; i < btns.length; i++) { // 遍历所有方向按钮
	var btn = btns[i]; // 获取当前按钮
	btn.onmouseenter = function () { // 鼠标移入事件
		clearInterval(timer); // 停止计时器
	}
	btn.onmouseout = function () { // 鼠标移出事件
		bannerTick(); // 重新启动计时器
	}
}

//点击左边按钮
function goLeft() { // 向左切换函数
	nowIndex -= 1; // 索引减1
	if (nowIndex < 0) { // 如果索引小于0
		nowIndex = imgs.length - 1; // 设置为最后一张图片的索引
	}
	changeAll(); // 调用更改所有元素的函数
}

//点击右边按钮
function goRight() { // 向右切换函数
	nowIndex += 1; // 索引加1
	if (nowIndex >= imgs.length) { // 如果索引超出图片数组长度
		nowIndex = 0; // 重置索引为0
	}
	changeAll(); // 调用更改所有元素的函数
}

//封装函数，隐藏含有图片的a标签
function changeImageA() { // 更改图片显示函数
	for (var i = 0; i < imgs.length; i++) { // 遍历所有图片链接
		imgs[i].style.display = "none"; // 隐藏所有图片
	}
}

//封装函数，修改小按钮的class名
function changePointA() { // 更改小按钮显示函数
	for (var i = 0; i < points.length; i++) { // 遍历所有小按钮
		points[i].className = "hidden"; // 设置所有小按钮为隐藏状态
	}
}

//封装函数，小按钮和图片同时切换
function changeAll() { // 更改所有元素函数
	changeImageA(); // 调用隐藏所有图片的函数
	changePointA(); // 调用修改所有小按钮的函数
	imgs[nowIndex].style.display = "block"; // 显示当前索引的图片
	points[nowIndex].className = "show"; // 设置当前索引的小按钮为显示状态
}